<template>
    <div class="UserChannels">
        <!-- 我的频道 -->
        <div class="myChannels box">
            <div class="top">
                <div class="left">
                    <p class="title">我的频道</p>
                    <span class="desc">点击进入频道</span>
                </div>
                <!-- 进行编辑操作，false表示不关闭频道弹出页 -->
                <button @click="edit(false)" ref="btn">编辑</button>
            </div>
            <div class="list">
                <div ref="userChannel"
                     class="userChannel"
                     @click="clickItem"
                     v-for="(e, i) in userChannel"
                     :key="e.id"
                     :class="id === i ? 'active' : ''">
                    {{ e.name }}
                </div>
            </div>
        </div>

        <!-- 推荐频道 -->
        <div class="recommend box">
            <div class="top">
                <div class="left">
                    <p class="title">推荐频道</p>
                    <span class="desc">点击编辑可添加频道</span>
                </div>
            </div>
            <div class="list">
                <div class="disabled"
                     ref="allChannel"
                     @click="clickItem"
                     v-for="e in allChannel"
                     :key="e.id">
                    + {{ e.name }}
                </div>
            </div>
        </div>
    </div>
</template>

<script>
import { addUserChannel, getChannel, getUserChannel } from '@/api/channel'

export default {
    name: 'UserChannels',
    props: {
        // 首页当前显示的频道的id
        id: true,
        // 频道编辑弹出页状态
        show: Boolean
    },
    data () {
        return {
            userChannel: [],
            allChannel: [],
            // 是否为可保存状态
            saveFlag: false
        }
    },
    watch: {
        // 当频道页为关闭false时执行
        show (val) {
            if (!val) {
                this.saveFlag = true
                // 进行编辑操作，true表示不关闭频道弹出页
                this.edit(true)
            }
        }
    },
    methods: {
        // 获取我的频道和推荐频道
        async init () {
            const resUser = await getUserChannel()
            this.userChannel = resUser.data.data.channels
            const resAll = await getChannel()
            this.allChannel = resAll.data.data.channels.filter(e => {
                // 筛选出我没有的频道
                return !this.userChannel.find(item => item.id === e.id)
            })
        },
        // 点击《保存》或《编辑》时的元素样式调整
        edit (close) {
            if (this.saveFlag) {
                // 当目前为可保存状态时执行：即按钮为《保存》

                // 将保存按钮样式改为编辑
                this.$refs.btn.classList.remove('save')
                this.$refs.btn.innerHTML = '编辑'
                // 移除所有用户频道的叉叉图标
                this.$refs.userChannel.forEach(item => {
                    item.classList.remove('edit')
                })
                // 将所有推荐频道样式改为禁用
                this.$refs.allChannel.forEach(item => {
                    item.classList.add('disabled')
                })

                // 保存编辑，close为布尔值，用于判断此次执行是否会关闭弹窗
                this.save(close)
            } else {
                // 当目前为可编辑状态时执行：即按钮为《编辑》

                // 将保存按钮样式改为保存
                this.$refs.btn.classList.add('save')
                this.$refs.btn.innerHTML = '保存'
                // 给所有用户频道添加叉叉图标
                this.$refs.userChannel.forEach(item => {
                    if (!item.classList.contains('active')) item.classList.add('edit')
                })
                // 移除所有推荐频道的禁用样式
                this.$refs.allChannel.forEach(item => {
                    item.classList.remove('disabled')
                })
            }

            this.saveFlag = !this.saveFlag
        },
        // 点击频道
        clickItem (e) {
            // 找到点击的是哪一个频道
            const userItem = this.userChannel.find(item => item.name === e.target.innerHTML.trim())
            const allItem = this.allChannel.find(item => item.name === e.target.innerHTML.trim().substring(2))

            if (this.saveFlag) {
                // 当目前为可保存状态时：即按钮为《保存》

                if (e.target.classList.contains('userChannel')) {
                    // 当点击的是用户频道

                    // 移除此用户频道
                    this.userChannel = this.userChannel.filter(e => e.id !== userItem.id)
                    // 把移除的频道添加到推荐频道
                    this.allChannel.push(userItem)
                    // 由于把移除的频道添加到推荐频道时，携带了推荐频道初始禁用样式
                    // 所以需要移除所有推荐频道的禁用样式
                    // 但是由于vue的数据渲染是异步操作，所以在推荐频道重新渲染的过程中
                    // 立刻执行了移除所有推荐频道的禁用样式的同步操作
                    // 所以需要使用$nextTick让此任务在下一个tick再执行
                    this.$nextTick(() => {
                        this.$refs.allChannel.forEach(item => {
                            console.log(1)
                            item.classList.remove('disabled')
                        })
                    })
                } else {
                    // 当点击的是推荐频道

                    // 移除此推荐频道
                    this.allChannel = this.allChannel.filter(e => e.id !== allItem.id)
                    // 把移除的频道添加到用户频道
                    this.userChannel.push(allItem)
                    // 给所有用户频道添加叉叉图标
                    this.$nextTick(() => {
                        this.$refs.userChannel.forEach(item => {
                            if (!item.classList.contains('active')) {
                                item.classList.add('edit')
                            }
                        })
                    })
                }
            } else if (e.target.classList.contains('userChannel')) {
                // 当目前为可编辑状态时：即按钮为《编辑》
                // 当点击的是用户频道

                // 给首页发送数据，让其切换频道，参数为需要切换频道的id
                this.$emit('changeChannel', this.userChannel.findIndex(e => userItem.id === e.id))
            }
        },
        // 保存编辑，发送请求
        async save (close) {
            // 当关闭频道弹窗状态为false时执行发送请求的操作
            // 当用户点击右上角叉叉时，close为true
            if (!close) {
                // 将发送的请求的数据进行加工
                const channels = this.userChannel.map((item, index) => {
                    return {
                        id: item.id,
                        seq: index
                    }
                })
                await addUserChannel({ channels })
                await this.init()
                // 给首页发通知，让其更新频道页面
                this.$emit('saveChannel')
            }
        }
    },
    created () {
        this.init()
    }
}
</script>

<style scoped>
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

.UserChannels {
    margin-top: 30px;

    .box {
        width: 100%;
        padding: 16px;

        .top {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 24px;

            .left {
                display: flex;
                align-items: center;

                .title {
                    font-size: 18px;
                    color: #333333;
                    line-height: 18px;
                    font-weight: 600;
                }

                .desc {
                    font-size: 12px;
                    color: #A5A6AB;
                    line-height: 12px;
                    margin-left: 10px;
                }

                + button {
                    color: #DE644B;
                    width: 57px;
                    height: 22px;
                    border-radius: 11px;
                    border: 1px solid #DE644B;
                    font-size: 12px;
                }
            }

            .save {
                color: white !important;
                background-color: #DE644B;
            }
        }

        .list {
            display: flex;
            flex-wrap: wrap;

            > div {
                min-width: 77px;
                text-align: center;
                height: 35px;
                border-radius: 17.5px;
                padding: 0 8px;
                line-height: 35px;
                background-color: #F7F8FA;
                font-size: 14px;
                margin: 0 13px 13px 0;
            }

            .active {
                color: #FC6627;
                font-weight: 700;
                border: 1px solid #FC6627;
            }

            .edit::before {
                content: '';
                display: block;
                transform: translate(55px, -5px);
                width: 15px;
                height: 15px;
                position: absolute;
                background: url(@/assets/img/btn_tag_close.svg) no-repeat;
                background-size: 15px;
            }

            .disabled {
                color: #A5A6AB;
            }
        }
    }
}
</style>
